import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { CASCADER_OPTIONS } from '../../data';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';

@Component({
  selector: 'app-input-number-group',
  standalone: true,
  imports: [
    NzInputNumberModule,
    NzInputModule,
    FormsModule,
    NzButtonModule,
    NzIconModule,
    NzSelectModule,
    NzCascaderModule,
    NzDatePickerModule,
  ],
  template: `
    <div class="demo demo-space">
      <div>
        <nz-input-number-group>
          <nz-input-number class="me-3" />
          <nz-input-number />
        </nz-input-number-group>
      </div>
      <div>
        <nz-input-number-group nzCompact>
          <nz-input-number style="width: 96px" />
          <nz-input-number style="width: 96px" />
        </nz-input-number-group>
      </div>
      <div>
        <nz-input-number-group nzCompact>
          <nz-input-number style="width: calc(100% - 200px)" />
          <button nz-button nzType="primary">Save</button>
        </nz-input-number-group>
      </div>
      <div>
        <nz-input-number-group nzCompact>
          <nz-input-number style="width: calc(100% - 32px)" />
          <button nz-button>
            <span nz-icon nzType="copy"></span>
          </button>
        </nz-input-number-group>
      </div>

      <div>
        <nz-input-number-group nzCompact>
          <nz-select ngModel="Zhejiang" style="width: 160px">
            <nz-option nzValue="Zhejiang" nzLabel="Zhejiang"></nz-option>
            <nz-option nzValue="Jiangsu" nzLabel="Jiangsu"></nz-option>
          </nz-select>
          <nz-input-number style="width: calc(100% - 160px)" />
        </nz-input-number-group>
      </div>

      <div>
        <nz-input-number-group nzCompact>
          <nz-input-number style="width: 100px" />
          <nz-date-picker></nz-date-picker>
        </nz-input-number-group>
      </div>

      <div>
        <nz-input-number-group nzCompact>
          <nz-input-number style="width: 100px" />
          <nz-range-picker></nz-range-picker>
        </nz-input-number-group>
      </div>
    </div>
  `,
})
export class InputNumberGroupComponent {
  value: number | '' = '';
}
